<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <script type="text/javascript" src="../../script/aes.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script type="text/javascript" src="../../script/modeecb.js"></script>
    <script type="text/javascript" src="../../script/tmd5.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
    <script type="text/javascript" src="../../resource/jquery214.js"></script>
    <script src="../../script/api.js"></script>
    <style>
    	body{
    		margin: 0;
    	}
    	.title{
    	    height: 45px;
    	    background: #0483d3;
    	    line-height: 45px;
    	    font-size: 20px;
    	    margin-bottom: 20px;
    	    position:fixd;
    	    position:fixed;
            margin-top:0; 
            width: 100%;
    	}
    	.RM_NUM{
    	    color: #fff;
    	    font-size: 24px;
    	    padding-left:5px;
    	}
    	.RM_M{
    	    color: #fff;
    	    font-size: 14px;
    	    padding-left:5px;
    	}
    </style>
</head>
<body>
<header id="statusBar">
	<div style="background: #0483d3;height: 120px;width: 100%;display: flex;">
	  <div style="padding-left: 5%;margin:auto 0;float: left;width:55%">
	     <div style="width: 30px;height: 30px;" onclick="api.closeWin();">
	         <img src="../../image/hotelManage/back.png"  style="width: 100%;"/>
	     </div>
	     <div style="color: #FFFFFF;font-size: 28px;">
	     住宿人员登记
	     </div>
	     <div style="color: #FFFFFF;font-size: 22px;margin-top: 5px;" id="hotelName">
	
	     </div>
	  </div>
	  <div style="width:20%;float: right;margin:auto 0;margin-left: auto;padding-right: 5%;" onclick="hotelInfo();">
	  <img src="../../image/hotelManage/user.png" style="width: 100%;"/>
	  </div>
	</div>
	</header>
	<div style="background: #e1e5ee;height: 45px;display: flex;">
	   <div style="color: #707070;float: left;margin:auto 0;padding-left: 5%;" id="total">

	   </div>
	   <div style="margin-left: auto;display: flex;" onclick="selectRoom();">
	   <div style="color: #707070;margin:auto 0;" id="category">
	   所有房间
	   </div>
	   <div style="width:20%;margin:auto 0;height: 100%;display: flex;">
	   <img src="../../image/hotelManage/dow.png" style="width: 100%;margin:auto 0;"/>
	   </div>
	   </div>
	</div>
	<div style="margin-bottom: 80px;" id="room" >

	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	apiready = function(){
	    console.log($api.getStorage("defid"));
	    var uiId;
//      var UILoading = api.require('UILoading');//显示加载动画
//		UILoading.flower({
//		    center: {
//		        x: api.winWidth/2.0,          
//		        y: api.winHeight/2.0 
//		    },
//		    size: 30,
//		    mask: "rgba(0,0,0,0.5)",
//		    fixed: true
//		}, function(ret) {
//		    //alert(JSON.stringify(ret));
//		    uiId = ret.id;
//		});
        if(api.systemType == "ios"){
		   document.getElementById("statusBar").style.background = "#298cb4";
		}
	    $api.fixStatusBar( $api.dom('header') );
	    
	    var phone = $api.getStorage("dl_phone");
        var callback = function(ret, err){
            api.addEventListener({//监听房间预订
			    name: 'bookSuccess'
			}, function(ret, err) {
			   location.reload();
			});
			api.addEventListener({//监听房间入住
			    name: 'checkin'
			}, function(ret, err) {
			   location.reload();
			});
	        if(ret){
	           if(ret.code == 0){
	              $api.setStorage("hotelId",ret.STATIONID);
	              show(ret.STATIONID,ret.HOTELNAME,uiId);
	           }else if(ret.code == 1){
	              //api.alert({msg: "授权已不足15天，截止日期为："+ret.EDATE});
	              $api.setStorage("hotelId",ret.STATIONID);
	              show(ret.STATIONID,ret.HOTELNAME,uiId);
	           }else if(ret.code == 98){
	              api.alert({msg: "未到授权日期，开始时间为："+ret.SDATE});
	              api.closeWin();
	           }else if(ret.code == 97){
	              api.alert({msg: "授权已过期，请联系工作人员"});
	              api.closeWin();
	           }else if(ret.code == 96){
	              api.alert({msg: "未找到旅馆信息，请先设置"});
	              setTimeout(function(){
		              api.openWin({
		                  name: 'sethotel',
		                  url: 'setHotel.html'
	                  });
                  },500); 
	           }else{
	              api.alert({msg: "数据异常，请联系工作人员"});
	              api.closeWin();
	           }
	        }else{
	           api.alert({msg: JSON.stringify(err)});
	        }
	    }
	    var content = {"phone":phone};
	    apiAjax(JSON.stringify(content),url.hotelInfo,callback);
	    
	    var NVTabBar = api.require('NVTabBar');
		NVTabBar.open({
		    styles: {
		        bg: '#fff',
		        h: 65,
		        dividingLine: {
		            width: 0.5,
		            color: '#8d8d8d'
		        },
		        badge: {
		            bgColor: '#fff',
		            numColor: '#fff',
		            size: 6.0,
		            centerX: 40,
		            centerY: 6
		        }
		    },
		    items: [{
		        w: api.winWidth / 4.0,
		        bg: {
		            marginB: 0,
		            image: ''
		        },
		        iconRect: {
		            w: 25.0,
		            h: 25.0,
		        },
		        icon: {
		            normal: 'widget://image/tabBar/index.png',
		            //highlight: 'widget://image/NVTabBar/actied.png',
		            selected: 'widget://image/tabBar/indexs.png'
		        },
		        title: {
		            text: '首页',
		            size: 12.0,
		            normal: '#8d8d8d',
		            selected: '#27a8fa',
		            marginB: 6.0
		        }
		    }, {
		        w: api.winWidth / 4.0,
		        bg: {
		            marginB: 0,
		            image: ''
		        },
		        iconRect: {
		            w: 25.0,
		            h: 25.0,
		        },
		        icon: {
		            normal: 'widget://image/hotelManage/guest.png',
		            //highlight: 'widget://image/NVTabBar/guaned.png',
		            selected: 'widget://image/hotelManage/guests.png'
		        },
		        title: {
		            text: '旅客管理',
		            size: 12.0,
		            normal: '#8d8d8d',
		            selected: '#27a8fa',
		            marginB: 6.0
		        }
		    }, {
		        w: api.winWidth / 4.0,
		        bg: {
		            marginB: 0,
		            image: ''
		        },
		        iconRect: {
		            w: 25.0,
		            h: 25.0,
		        },
		        icon: {
		            normal: 'widget://image/hotelManage/due.png',
		            //highlight: 'widget://image/NVTabBar/faved.png',
		            selected: 'widget://image/hotelManage/dues.png'
		        },
		        title: {
		            text: '预定汇总',
		            size: 12.0,
		            normal: '#8d8d8d',
		            selected: '#27a8fa',
		            marginB: 6.0
		        }
		    }, {
		        w: api.winWidth / 4.0,
		        bg: {
		            marginB: 0,
		            image: ''
		        },
		        iconRect: {
		            w: 25.0,
		            h: 25.0,
		        },
		        icon: {
		            normal: 'widget://image/hotelManage/system.png',
		            //highlight: 'widget://image/NVTabBar/faved.png',
		            selected: 'widget://image/hotelManage/systems.png'
		        },
		        title: {
		            text: '系统管理',
		            size: 12.0,
		            normal: '#8d8d8d',
		            selected: '#27a8fa',
		            marginB: 6.0
		        }
		    }],
		    selectedIndex: 0
		}, function(ret, err) {
		   if(ret.eventType == "click"){
		      if(ret.index == 0){//首页
		          api.openFrame({
	                  name: 'main',
	                  url: 'main.html',
	                  hScrollBarEnabled: false,
	                  rect: {
		                  x:0,
		                  y:0,
		                  w:'auto',
		                  h:'auto'
	                  }
                  });
                  NVTabBar.bringToFront();//显示底部导航栏
		      }else if(ret.index == 1){//旅客管理
		          api.openFrame({
	                  name: 'guestManage',
	                  url: 'guestManage.html',
	                  hScrollBarEnabled: false,
	                  rect: {
		                  x:0,
		                  y:0,
		                  w:'auto',
		                  h:'auto'
	                  }
                  });
                  NVTabBar.bringToFront();//显示底部导航栏
		      }else if(ret.index == 2){//预定列表
		          api.openFrame({
	                  name: 'bookList',
	                  url: 'bookList.html',
	                  hScrollBarEnabled: false,
	                  rect: {
		                  x:0,
		                  y:0,
		                  w:'auto',
		                  h:'auto'
	                  },
	                  progress: {
	                      type:"default",                //加载进度效果类型，默认值为default，取值范围为default|page，default等同于showProgress参数效果；为page时，进度效果为仿浏览器类型，固定在页面的顶部
						  title:"",               //type为default时显示的加载框标题
						  text:"加载中...",                //type为default时显示的加载框内容
						  color:"#45C01A"                //type为page时进度条的颜色，默认值为#45C01A，支持#FFF，#FFFFFF，rgb(255,255,255)，rgba(255,255,255,1.0)等格式
	                  }
                  });
                  NVTabBar.bringToFront();//显示底部导航栏
		      }else if(ret.index == 3){//系统管理
		         api.openFrame({
	                  name: 'systemManage',
	                  url: 'systemManage.html',
	                  hScrollBarEnabled: false,
	                  rect: {
		                  x:0,
		                  y:0,
		                  w:'auto',
		                  h:'auto'
	                  }
                  });
                  NVTabBar.bringToFront();//显示底部导航栏
		      }
		   }
		});
		
	};
	
	function hotelInfo(){
	   api.openWin({
	       name: 'sethotel',
	       url: 'setHotel.html'
       });
	}
	
	//显示房间及状态
	function show(hotelId,hotelName,uiId){
	   $("#hotelName").html(hotelName);
	   var callback = function(ret, err){
	      var UILoading = api.require('UILoading');
	      UILoading.closeFlower({
			 id: uiId
		  });
	      if(ret.success == true || ret.success == "true"){
	         $api.setStorage("room",ret.room);
	         showRoom(ret.room);
	      }
	    }
	    var content = {"hotelId":$api.getStorage("hotelId")};
	    apiAjax(JSON.stringify(content),url.queryRoom,callback);
	}
	
	//房间操作
	function operation(rzxx,num,id,status,price){
	    api.actionSheet({
		    title: '房间号：'+num,
		    cancelTitle: '取消',
		    buttons: ['预定', '入住', '退房']
		}, function(ret, err) {
		    var index = ret.buttonIndex;
            if(index == 1){
              if(status == "2"){
                 api.alert({msg:"该房间已预定"});
                 return;
              }else{
               book(num,id,price);
              }
            }else if(index == 2){
              if(status == "2"){
                 api.alert({msg:"该房间已入住"});
                 return;
              }else{
               checkin(num,id,price);
              }
            }else if(index == 3){
              if(status == "0" || status == "2"){
                 api.alert({msg:"该房间为空闲房间，无法退房"});
                 return;
              }else{
               checkout(num,id,rzxx);
              }
            }
		});
	}
	
	//预定
	function book(room,id,price){
	   api.openWin({
	       name: 'bookroom',
	       url: 'bookRoom.html',
	       pageParam: {
	            room: room,
	            id: id,
	            price: price
	       }
       });
	}
	
	//入住
	function checkin(room,id,price){
	    api.openWin({
	       name: 'checkin',
	       url: 'checkin.html',
	       pageParam: {
	            room: room,
	            id: id,
	            price: price
	       }
       });
	}
	
	//退房
	function checkout(num,id,rzxx){
	   var hotelId = $api.getStorage("hotelId");
	   var dialogBox = api.require('dialogBox');
			dialogBox.taskPlan({
			    rect: {
			        w: 300
			    },
			    tapClose: true,
			    texts: {
			        mainTitle: '房间号：'+num,
			       // subTitle: '今天没有获得任务次数奖励呢',
			        content: [{
			            text: '旅客姓名：'+rzxx.name
			        }, {
			            text: '证件类型：'+rzxx.zjlx
			        }, {
			            text: '证件号码：'+rzxx.zjhm
			        }, {
			            text: '押金金额：'+rzxx.yjje
			        }],
			        btnTitle: '退房'
			    },
			    styles: {
			        bg: '#fff',
			        main: {
			            marginT: 20,
			            color: '#636363',
			            size: 20,
			            bold: true,
			        },
//			        sub: {
//			            marginT: 8,
//			            color: '#999999',
//			            size: 12,
//			        },
			        content: [{
			            bg: '#fff',
			            marginT: 10,
			            w: 280,
			            h: 30,
			            align: 'left',
			            color: '#007FFF',
			            size: 18
			        }, {
			            bg: '#fff',
			            marginT: 10,
			            w: 280,
			            h: 30,
			            align: 'left',
			            color: '#007FFF',
			            size: 18
			        }, {
			            bg: '#fff',
			            marginT: 10,
			            w: 280,
			            h: 30,
			            align: 'left',
			            color: '#007FFF',
			            size: 18
			        }, {
			            bg: '#fff',
			            marginT: 10,
			            w: 280,
			            h: 30,
			            align: 'left',
			            color: '#007FFF',
			            size: 18
			        }],
			        ok: {
			            marginB: 10,
			            marginL: 20,
			            w: 280,
			            h: 40,
			            bg: '#fff',
			            color: '#007FFF',
			            size: 18
			        }
			    }
			}, function(ret) {
			    if (ret.eventType == 'ok') {
			        var callback = function(ret, err){
				        //console.log(JSON.stringify(ret));
				        if(ret.success == true || ret.success == "true"){
				           api.alert({msg: "退房成功"});
				           api.sendEvent({
							    name: 'checkin'
						   });
				        }else{
				           api.alert({msg: "退房失败，"+ret.msg});
				        }		        
				    }
				    var content = {"id":rzxx.id,"cashstatus":"1","roomid":rzxx.roomid,"hotelId":hotelId};
				    apiAjax(JSON.stringify(content),url.checkout,callback);
			        dialogBox.close({
			            dialogName: 'taskPlan'
			        });
			    }
			});
	}
	
	//选择显示房间类型
	function selectRoom(){
	  var mnPopups = api.require('MNPopups');
		mnPopups.open({
		    rect: {
		        w: 140,
		        h: 180
		    },
		    position: {
		        x: api.winWidth*0.78,
		        y: 145
		    },
		    styles: {
		        mask: 'rgba(0,0,0,0.5)',
		        bg: '#eee',
		        corner: 5, 
		        cell: {
		            bg: {
		                normal: '',
		                highlight: '#707070'
		            },
		            h: 45,
		            title: {
		                marginL: 45,
		                color: '#636363',
		                size: 12,
		            },
		             icon: {                      //（可选项）JSON 类型；列表项图标的样式设置，上下居中
			            marginL: 10,             //（可选项）数字类型；图标相对于列表项左边的间距大小；默认：10
			            w: 25,                   //（可选项）数字类型；图标的宽度；默认：25
			            h: 25,                   //（可选项）数字类型；图标的高度；默认：同 w
			            corner: 2                //（可选项）数字类型；图标的圆角半径；默认：2
			        },
		        },
		        pointer: {
		            size: 7,
		            xPercent: 88,
		            yPercent: 0,
		            orientation: 'downward'
		        }
		    },
		    datas: [{
		        title: '所有房间'
		    }, {
		        title: '入住房间'
		    }, {
		        title: '预订房间'
		    }, {
		        title: '空闲房间'
		        //icon: 'fs://MNPopups/send.png'
		    }],
		    animation: true
		}, function(ret) {
		    if (ret.eventType == "click") {
		        if(ret.index == 0){
		          document.getElementById("category").innerHTML = "所有房间";
		          var room = eval("("+$api.getStorage(room)+")");
		          if($api.getStorage("room") == "undefined"){
		             api.alert({msg:"未找到房间"});
		             return;
		          }
		          showRoom($api.getStorage("room"));
		        }else if(ret.index == 1){
		          document.getElementById("category").innerHTML = "入住房间";
		          if($api.getStorage("room") == "undefined"){
		             api.alert({msg:"未找到房间"});
		             return;
		          }
		          var room = eval("("+$api.getStorage("room")+")");
		          var data = [];
		          for(var i=0;i<room.length;i++){
		             if(room[i].roomstatus == "1"){
		                data.push(room[i]);
		             }
		          }
		          showRoom(JSON.stringify(data));
		        }else if(ret.index == 2){
		          document.getElementById("category").innerHTML = "预订房间";
		          if($api.getStorage("room") == "undefined"){
		             api.alert({msg:"未找到房间"});
		             return;
		          }
		          var room = eval("("+$api.getStorage("room")+")");
		          var data = [];
		          for(var i=0;i<room.length;i++){
		             if(room[i].roomstatus == "2"){
		                data.push(room[i]);
		             }
		          }
		          showRoom(JSON.stringify(data));
		        }else if(ret.index == 3){
		          document.getElementById("category").innerHTML = "空闲房间";
		          if($api.getStorage("room") == "undefined"){
		             api.alert({msg:"未找到房间"});
		             return;
		          }
		          var room = eval("("+$api.getStorage("room")+")");
		          var data = [];
		          for(var i=0;i<room.length;i++){
		             if(room[i].roomstatus == "0"){
		                data.push(room[i]);
		             }
		          }
		          showRoom(JSON.stringify(data));
		        }
		    }
		});
	}
	
	//房间及状态显示
	function showRoom(room){
	   var margin = (api.winWidth-3*90)/4;
	   var html = "";
       var data = eval("("+room+")");
         var count = data.length;
         $("#total").html("房间数量："+count+"间");
         var line = Math.ceil(count/3);
         for(var j = 0;j<line;j++){
	        var column = 3;
	        html += "<div style=\"margin-top: 15px;\">";
	        if(j == line-1 && count%3 != 0){
	          column = count%3;
	        }
		    for(var i = 0;i < column;i++){
		       var n = 3*j+i;
		       if(data[n].roomstatus == "0"){
		          var rzxx = "";
		          html += "<div style=\"border-radius:10px;height: 90px;width: 90px;background: #707070;float: left;margin-left: "+margin+"px\" onclick=\"operation('"+rzxx+"','"+data[n].roomnum+"','"+data[n].roomid+"','"+data[n].roomstatus+"','"+data[n].price+"');\">";
		       }else if(data[n].roomstatus == "1"){
		          var rzxx = data[n].rzxx.replace(/"/g, "'");
		          html += "<div style=\"border-radius:10px;height: 90px;width: 90px;background: #7CCD7C;float: left;margin-left: "+margin+"px\" onclick=\"operation("+rzxx+",'"+data[n].roomnum+"','"+data[n].roomid+"','"+data[n].roomstatus+"','"+data[n].price+"');\">";
		       }else if(data[n].roomstatus == "2"){
		          var rzxx = "";
		          html += "<div style=\"border-radius:10px;height: 90px;width: 90px;background: #5CACEE;float: left;margin-left: "+margin+"px\" onclick=\"operation('"+rzxx+"','"+data[n].roomnum+"','"+data[n].roomid+"','"+data[n].roomstatus+"','"+data[n].price+"');\">";
		       }
		       html +="<div class=\"RM_NUM\">"+data[n].roomnum+"</div>"
		            +"<div class=\"RM_M\">"+data[n].price+"元/天</div>"
		            +"<div class=\"RM_M\">"+data[n].maxpeople+"人间</div>"
		            +"</div>";
		    }
		    html += "</div><div style=\"clear:both;\"></div>";
	     }
	     document.getElementById("room").innerHTML = html;
      }
</script>
</html>